import React, { useState } from 'react';
import { Search, Sidebar, Toast } from 'react-vant';
import { Cart } from '@react-vant/icons'
import "./index.less"
import {history} from 'umi'

const Sgfenlei = () => {
    const [value, setValue] = useState('');
    const [active, setActive] = useState(0);
    const [type, setType] = useState('推荐')
    let list1 = ['推荐', '瓜类', '菩提浆果', '桃李杏枣', '热带水果', '苹果梨焦', '柑橘橙柚']
    let list2 = [
        { id: 'w1', img: 'https://img2.baidu.com/it/u=4203775467,176030952&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500', name: '哈密瓜好吃不贵', price: '30', type: '推荐' },
        { id: 'w2', img: 'https://img1.baidu.com/it/u=2017971842,3513242633&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', name: '红苹果好吃不贵', price: '30', type: '瓜类' },
        { id: 'w3', img: 'https://img0.baidu.com/it/u=66242029,3902093238&fm=253&fmt=auto&app=138&f=PNG?w=500&h=527', name: '红苹果好吃不贵', price: '30', type: '推荐' },
        { id: 'w4', img: 'https://img0.baidu.com/it/u=3397820028,1023040075&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500', name: '紫葡萄好吃不贵', price: '30', type: '推荐' },
        { id: 'w5', img: 'https://img0.baidu.com/it/u=3439045947,2456165994&fm=253&fmt=auto&app=138&f=JPEG?w=705&h=500', name: '大西瓜好吃不贵', price: '30', type: '推荐' },
        { id: 'w6', img: 'http://t13.baidu.com/it/u=1772150175,197919829&fm=224&app=112&f=JPEG?w=500&h=500', name: '火龙果好吃不贵', price: '30', type: '推荐' },
        { id: 'w7', img: 'https://img2.baidu.com/it/u=2722280625,3383916778&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=328', name: '木菠萝好吃不贵', price: '30', type: '推荐' },
    ]

    return <div className='pingguoBox'>
        <div className='headerBox1'>
            <div className='topbox'>
                <img onClick={()=>history.push('/app/home')} src={require('../../../../public/wzcimg/向左箭头.svg')} alt="" />
                <span>水果</span>
            </div>
            <div>
                <Search shape="round" value={value} onChange={setValue} placeholder="请输入搜索关键词" />
            </div>
        </div>
        <div>
            <Sidebar
                value={active}
                onChange={(v) => {
                    setType(list1[v])
                    setActive(v);
                    console.log(type);
                    // Toast.info(`标签名 ${v + 1}`);
                }}
            >
                {
                    list1.map(item => {
                        return <Sidebar.Item title={item} key={item}>
                            <div className='xunhuanbox'>
                                {
                                    list2.filter(item1 => item1.type == type).map(item2 => {
                                        return <div key={item2.id} className='kkbox'>
                                            <div className='imgbox'>
                                                <img src={item2.img} alt="" />
                                            </div>
                                            <div className='zibox'>
                                                <p className='span1'>{item2.name}</p>
                                                <p className='span2'>￥{item2.price}.00</p>
                                                <p className='span3'><Cart fontSize={'8vw'}   ></Cart></p>
                                            </div>
                                        </div>
                                    })
                                }
                            </div>
                        </Sidebar.Item>
                    })
                }
            </Sidebar>
        </div>
    </div>;
}

export default Sgfenlei;